import React, { memo } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { getSongDetailAction } from "../../../store/actionCreators";

import { ListWrapper } from "./style";

import { formatDate } from "@/utils/format-utils";
import { shallowEqual } from 'react-redux';

const PanelList = memo(() => {
  const dispatch = useDispatch();
  const { playList, currentSongIndex } = useSelector(state => ({
    playList: state.getIn(["player", "playList"]),
    currentSongIndex: state.getIn(["player", "currentSongIndex"])
  }), shallowEqual);

  const addClassName = (index) => {
    let className = "play-item";
    if (currentSongIndex === index) {
      className += " active";
    };
    return className;
  };

  const playMusic = (ids) => {
    dispatch(getSongDetailAction(ids));
  };

  /**子组件点击分享 阻止冒泡 */
  const handlerLink = (event, ids) => {
    event.stopPropagation()
    console.log(ids);
  };

  return (
    <ListWrapper>
      {
        playList.map((item, index) => {
          return (
            <div 
              key={item.id}
              className={addClassName(index)}
              onClick={e => playMusic(item.id)}
            >
              <div className="left">{ item.name }</div>

              <div className="right">
                <span className="singer text-nowrap">{ item.ar[0].name }</span>
                <span className="duration">{ formatDate(item.dt, "mm:ss") }</span>
                <span className="sprite_playlist link" onClick={e => handlerLink(e, item.id)}></span>
              </div>
            </div>
          )
        })
      }
    </ListWrapper>
  )
})

export default PanelList